<template>
  <view class="container">
    <wd-collapse accordion v-model="value">
      <wd-collapse-item
        v-for="item in onlinestates"
        :key="item.areaGroupDto.id"
        :name="item.areaGroupDto.id"
        :title="`${item.areaGroupDto.name}(${item.activeMemberCount}/${item.allMemberCount})`"
      >
        <wd-cell-group>
          <wd-cell
            v-for="phone in item.phoneDtos"
            :key="phone.id"
            :title="phone.name"
            :label="phone.phoneNumber"
            ><wd-tag custom-class="space" v-if="phone.loginState" type="success"
              >在线</wd-tag
            >
            <wd-tag custom-class="space" v-if="!phone.loginState" type="danger"
              >离线</wd-tag
            >
          </wd-cell>
        </wd-cell-group></wd-collapse-item
      >
    </wd-collapse>
  </view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { GetOnlineStateByPhoneID } from '@/API/areagroup/index'
import type { OnlineStateDto } from '@/API/areagroup/types'
import { useUserStore } from '@/store/user/index'
import { onPullDownRefresh } from '@dcloudio/uni-app'
const onlinestates = ref<Array<OnlineStateDto>>()
const value = ref<string>('')
const loaddata = async () => {
  const userStore = useUserStore()
  onlinestates.value = await GetOnlineStateByPhoneID(userStore.phoneid)

  console.log(onlinestates.value)
}

onMounted(() => {
  loaddata()
})

onPullDownRefresh(() => {
  loaddata()
  uni.stopPullDownRefresh()
})
</script>

<style lang="scss" scoped>
:deep(.wd-tag__text) {
  font-size: 30rpx;
}
:deep(.wd-collapse-item__header) {
  view {
    justify-content: space-between;
  }

  text {
    justify-content: space-between;
  }
}

:deep(.wd-collapse-item__header-first) {
  view {
    justify-content: space-between;
  }

  text {
    justify-content: space-between;
  }
}

.container {
  margin: 0 30rpx;
}
</style>
